<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a><cite>商品管理</cite></a>
    <a><cite>转售商品</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layadmin-search">
      <form class="layui-form" method="post" lay-filter="form_product_search">
        <script type="text/html" template>
          <div class="layui-inline">
            <div class="layui-form-label">所属代理</div>
            <div class="layui-input-inline">
              <select name="agent_id" class="layui-select">
                <option value="">选择商品所属代理</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <div class="layui-form-label">关键字搜索</div>
            <div class="layui-input-inline" style="width: 300px">
              <input type="text" name="keyword" value="{{decodeURIComponent(layui.router().search.keyword || '')}}"
                     class="layui-input"
                     placeholder="请输入商品名称或发行者手机号">
            </div>
          </div>

          <div class="layui-inline">
            <div class="layui-form-label">日期范围</div>
            <div class="layui-inline" id="date_range">
              <div class="layui-input-inline">
                <input type="text" name="start_date" autocomplete="off" id="start_date" class="layui-input"
                       style="width: 100px" value="{{layui.router().search.start_date || ''}}" placeholder="创建开始日期">
              </div>
              <div class="layui-input-inline">~</div>
              <div class="layui-input-inline">
                <input type="text" name="end_date" autocomplete="off" id="end_date" class="layui-input"
                       style="width: 100px" value="{{layui.router().search.end_date || ''}}" placeholder="创建结束日期">
              </div>
            </div>
          </div>
          <div class="layui-inline layui-btn-group">
            <button type="submit" lay-submit class="layui-btn" lay-filter="submit_product_search">
              <i class="layui-icon layui-icon-search"></i>查询
            </button>
            <button type="submit" lay-submit class="layui-btn layui-btn-warm"
                    lay-filter="reset_product_search">
              <i class="layui-icon layui-icon-close"></i>重置
            </button>
          </div>


          <div class="layui-inline layui-btn-group">
            <button type="submit" lay-submit class="layui-btn layui-btn-info"
                    lay-filter="product_export">
              <i class="layui-icon layui-icon-close"></i>导出
            </button>
          </div>
        </script>
      </form>
    </div>
    <div class="layui-card-body">
      <div id="table_product"></div>
      <script type="text/html" id="tpl_name">
        {{# if (d.type.value === 'issue') { }}
        <span class="layui-badge layui-bg-green">{{d.type.description}}</span>
        {{# } }}
        {{# if (d.type.value === 'resale') { }}
        <span class="layui-badge layui-bg-orange">{{d.type.description}}</span>
        {{# } }}
        {{# if (d.type.value === 'blind_box') { }}
        <span class="layui-badge layui-bg-blue">{{d.type.description}}</span>
        {{# } }}
        {{# if (d.test_only) { }}
        <span class="layui-badge">测试</span>
        {{# } }}
        {{d.name}}
      </script>
      <script type="text/html" id="tpl_resale_user">
        {{d.resale_user.mobile}}
      </script>
      <script type="text/html" id="tpl_agent">
        {{d.agent ? d.agent.name : ''}}
      </script>
      <script type="text/html" id="tpl_status">
        {{# if (d.status.value === 'init') { }}
        <span class="layui-font-gray">{{d.status.description}}</span>
        {{# } }}
        {{# if (d.status.value === 'on_sale') { }}
        <span class="layui-font-green">{{d.status.description}}</span>
        {{# } }}
        {{# if (d.status.value === 'pause') { }}
        <span class="layui-font-gray">{{d.status.description}}</span>
        {{# } }}
        {{# if (d.status.value === 'stop') { }}
        <span class="layui-font-gray">{{d.status.description}}</span>
        {{# } }}
      </script>
      <script type="text/html" id="tpl_tool">
        <a class="layui-table-link" lay-href="product/detail/id={{d.id}}">
          详情
        </a>
        {{# if (d.type.value === 'issue') { }}
        <div class="ant-divider"></div>
        {{# if (d.status.value !== 'on_sale') { }}
        <a class="layui-table-link layui-font-green" lay-event="online">
          {{d.status.value === 'init' ? '上架' : '重新上架'}}
        </a>
        {{# } else { }}
        <a class="layui-table-link layui-font-red" lay-event="offline">
          下架
        </a>
        {{# } }}
        {{# } }}
      </script>
    </div>
  </div>
</div>

<script>
  layui.use(['fox_table'], function () {
    let $ = layui.$
      , fox_table = layui.fox_table
      , admin = layui.admin
      , form = layui.form
      , laydate = layui.laydate
      , view = layui.view
      , agents = []

    let resourceUrl = 'admin/products?type=resale'

    //加载代理列表
    admin.get('admin/agents?limit=1000', function (res) {
      agents = res.data
      layui.each(res.data, function (index, agent) {
        let opt = new Option(agent.name, agent.id)
        if (agent.id == layui.router().search.agent_id) {
          opt.selected = true
        }
        $('select[name="agent_id"]').append(opt)
      })
      form.render()
    })

    //日期时间选择器
    laydate.render({
      elem: '#date_range'
      , range: ['#start_date', '#end_date']
    });
    form.render()


    // 列表查询
    fox_table.render({
      id: 'table_product'
      , url: resourceUrl
      , cols: [[
        {title: 'ID', field: 'id', width: 80, align: "center", sort: true}
        , {title: '转售人', templet: '#tpl_resale_user', width: 150}
        , {title: '商品名称', templet: '#tpl_name', minWidth: 100}
        , {title: '所属代理', templet: '#tpl_agent', width: 100}
        , {title: '价格', field: 'display_price', width: 100, align: "center"}
        , {title: '库存', field: 'left_count', width: 70, align: "center"}
        , {title: '状态', templet: '#tpl_status', width: 100, align: "center"}
        , {title: '添加时间', field: 'created_at', width: 180, align: "center"}
        , {title: '操作', width: 100, align: 'left', fixed: 'right', toolbar: '#tpl_tool'}
      ]]
    });

    form.on('submit(product_export)', function (data) {
      layer.load();
      admin.post('admin/export/resale' , data.field,function (res) {
        layer.confirm('数据下载中，请到下载中心查看下载任务进度.', function (index) {
          layer.close(index);
          location.hash = '/ops/download';
          return false;
        });
        layer.closeAll('loading');
      }, {hasLoading: true})

      return false;
    });

    //监听操作栏
    fox_table.toolbar(function (obj) {
      let data = obj.data;
      if (obj.event === 'online') {
        showOnlineForm(data)
      }
      if (obj.event === 'offline') {
        layer.confirm('确定下架该产品?', function (index) {
          admin.post(resourceUrl + '/' + data.id + '/offline', {}, function (res) {
            layer.close(index);
            fox_table.reload(); //重载表格
          })
        });
      }
    });

    //搜索
    form.on('submit(submit_product_search)', function (d) {
      fox_table.reload(d.field);
      return false;
    });
    //重置
    form.on('submit(reset_product_search)', function (d) {
      $("input[name='keyword']").val('');
      $('select[name="agent_id"]').val('');
      form.render()
      fox_table.reload({});
      return false;
    });

    function showOnlineForm(data) {
      let minWidth = '800px';
      let minHeight = '1000px';
      data.agents = agents
      admin.popup({
        title: '商品发布'
        , area: [minWidth, minHeight]
        , id: 'popup_product_online'
        , success: function (layero, index) {
          view(this.id).render('/product/online_form', data).done(function () {
            form.on('submit(submit_online)', function (d) {
              let field = d.field;
              field.test_only = field.test_only === 'on' ? 1 : 0
              admin.post(resourceUrl + '/' + data.id + '/release', field, function (res) {
                layer.close(index);
                fox_table.reload();
              })
            })
          })
        }
      })
    }
  })
</script>

